<template>
	<view class="header-top">
		<view class="header" :style='"height: "+navH+"rpx;background-color:"+backgroundColor'>
			<view class="header-content acea-row row-center-wrapper">
				<view class="header-text line1" :style='"color: "+color+";"'><slot /></view>
			</view>
			<view class="iconfont icon-jiantou" :style='"color: "+color+";"' v-if="showBack" @click="goBack"></view>
		</view>
		<view :style='"height: "+navH+"rpx;"'></view>
	</view>
</template>

<script>
	const app = getApp();
	export default{
		props:{
			backgroundColor:{
				type:String,
				default:"#FFFFFF"
			},
			color:{
				type:String,
				default:"#000"
			},
			showBack:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				navH:""
			}
		},
		created() {
			this.navH = app.globalData.navHeight;
		},
		methods:{
			goBack:function(){
				uni.navigateBack({})
			}
		}
	}
</script>

<style scoped>
	.header{
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
	}
	.header-content{
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
	}
	.header-text{
		color: #000;
		font-size: 36rpx;
		font-weight: bold;
		width: 300rpx;
		text-align: center;
	}
	.header .iconfont{
		font-size: 40rpx;
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		color: black;
		font-weight: blod;
		position: absolute;
		bottom: 25rpx;
		left: 20rpx;
	}
</style>
